<template>
  <basic-container class="basic-container" style="
        position: relative;
        height: calc(100% - 80px) !important;
        overflow-y: auto;
        overflow-x: hidden;
      ">
    <modal
      ref="customerDialogForm"
      :title="title"
      :isCloseConfirm="editable"
      top="3%"
      width="80%"
      height="50%"
      :close-on-click-modal="true"
      @modalOpened="opened"
      @modalClose="close">

      <el-radio-group v-model="basicContent">
        <el-radio-button :label="basicContent">基本信息</el-radio-button>
      </el-radio-group>
      <br /><br />
      <avue-form ref="form" :option="option" v-model="form" @submit="handleSubmit" @tab-click="handleTabClick">
        <template #factory>
          <factory ref="factory" @disabledCommit="disabledCommit"></factory>
        </template>
        <!--<template #bankInfo>-->
          <!--<bank-info ref="bankInfo"></bank-info>-->
        <!--</template>-->
        <template #materialInfo>
          <material-info ref="materialInfo"></material-info>
        </template>
      </avue-form>
      <template #footerButton>

        <el-button type="primary" icon="el-icon-check" :disabled="btnLoading"
          @click="$refs.form.submit()">
          保 存
        </el-button>
        <el-button @click="this.$refs.customerDialogForm.handleClose()">关闭</el-button>

      </template>
    </modal>
  </basic-container>
</template>

<script>
import { getList, getDetail, add, update, remove } from '@/api/anwise/customer/customer';
import { mapGetters } from 'vuex';
import { FormMixin } from '@/mixins/FormMixin';
import Factory from './components/factory.vue';
// import BankInfo from './components/bank_info.vue';
import MaterialInfo from './components/customer_material.vue';
import { Pattern } from '@/utils/validate.js';
import func from '@/utils/func';
import { setStore, getStore } from '@/utils/store';

export default {
  components: {
    Factory,
    // BankInfo,
    MaterialInfo
  },
  props: {
    title: {
      type: String,
    },
  },
  data() {
    return {
      namw: 'customer_form',
      basicContent: 'basicContent',
      editable: true,
      customerId: '',
      form: {},
      flowList: [],
      btnLoading: false,
      disabled: false,
      id: '',
      option: {
        card: true,
        tabs: true,
        tabsActive: 1,
        labelWidth: 100,
        // labelPosition:'left',
        labelSuffix: '',
        submitBtn: false,
        emptyBtn: false,
        // group: [
        //   {
        //     icon: 'el-icon-info',
        //     label: '基础信息',
        //     prop: 'group12',

        column: [
          {
            label: '客户名称',
            prop: 'custName',
            type: 'input',
            rules: [
              {
                required: true,
                message: '请输入客户名称',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '英文名称',
            prop: 'custNameEn',
            type: 'input',
          },
            // {
            //     label: "组织机构",
            //     prop: "deptId",
            //     type: "select",
            //     width: 120,
            //     span:6,
            //     filterable: true,
            //     dicUrl: '/api/blade-anwise/common/deptList?deptCategory=1&bodyType=4',
            //     props: {
            //         label: 'deptName',
            //         value: 'id',
            //     },
            //     dataType: 'string',
            //     rules: [{
            //         required: true,
            //         message: "请输入组织机构",
            //         trigger: "blur"
            //     }],
            // },
          {
            label: '客户类别',
            prop: 'custType',
            type: 'select',
            filterable: true,
            span: 6,
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=customer_type',
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
            dataType: 'string',
            search: true,
            rules: [
              {
                required: true,
                message: '请输入客户类别',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '停止交易',
            prop: 'stopTrading',
            type: 'select',
            span: 6,
            filterable: true,
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=biz_yes_no',
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
            dataType: 'string',
            search: true,
            rules: [
              {
                required: true,
                message: '请选择是否停止交易',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '贸易条款',
            prop: 'tradeTerms',
            type: 'select',
            span: 6,
            filterable:true,
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=trade_terms',
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
            dataType: 'string',
            search: true,
            rules: [
              {
                required: true,
                message: '请选择贸易条款',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '运输方式',
            prop: 'tansportModes',
            type: 'select',
            span: 6,
            filterable:true,
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=tansport_modes',
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
            dataType: 'string',
            search: true,
            rules: [
              {
                required: true,
                message: '请选择运输方式',
                trigger: 'blur',
              },
            ],
          },

            {
                label: '付款条件',
                prop: 'paymentTerms',
                type: 'select',
                span: 6,
                filterable: true,
                dicUrl: '/api/blade-system/dict-biz/dictionary?code=pay_condition',
                props: {
                    label: 'dictValue',
                    value: 'dictKey',
                },
                dataType: 'string',
            },
            {
                label: '信用额度',
                prop: 'creditLimit',
                type: 'number',
                clearable: true,
                min: 0,
                max: 9999999999,
                controls: false,
                span: 6,
                rules: [
                    {
                        required: false,
                        // message: "请输入邮箱",
                        // trigger: "blur"
                    },
                    {
                        pattern: Pattern.amount,
                        message: '请输入正确的金额',
                        trigger: 'blur',
                    },
                ],
            },
          {
            label: '客户地址',
            prop: 'custAddr',
            type: 'input',
            span: 12,
            rules: [
              {
                required: true,
                message: '请输入客户地址',
                trigger: 'blur',
              },
            ],
          },


          {
            label: '内部提醒',
            prop: 'internalReminder',
            type: 'textarea',
            minRows: 2,
            span: 12,
            hide: true,
          },
          {
            label: '箱唛备注',
            prop: 'cartonMarkRemark',
            type: 'textarea',
            minRows: 2,
            span: 12,
            hide: true,
          },
          {
            label: '销售备注',
            prop: 'salesRemark',
            type: 'textarea',
            minRows: 2,
            span: 12,
            hide: true,
          },
          {
            label: '生产备注',
            prop: 'prodRemark',
            type: 'textarea',
            minRows: 2,
            span: 12,
            hide: true,
          },
          {
            label: '联系人1',
            prop: 'contact1',
            type: 'input',
            span: 6,
          },
          // {
          //   label: '联系人1部门',
          //   prop: 'contactDept1',
          //   type: 'input',
          //   hide: true,
          //   span: 6,
          // },
          {
            label: '联系人1电话',
            prop: 'contactPhone1',
            type: 'input',
            span: 6,
          },
          // {
          //   label: '联系人1邮箱',
          //   prop: 'contactMail1',
          //   type: 'input',
          //   span: 6,
          //   rules: [
          //     {
          //       required: false,
          //       // message: "请输入邮箱",
          //       // trigger: "blur"
          //     },
          //     {
          //       pattern: Pattern.email,
          //       message: '非法的邮件格式',
          //       trigger: 'blur',
          //     },
          //   ],
          // },
          {
            label: '联系人2',
            prop: 'contact2',
            type: 'input',
            hide: true,
            span: 6,
          },
          // {
          //   label: '联系人2部门',
          //   prop: 'contactDept2',
          //   type: 'input',
          //   hide: true,
          //   span: 6,
          // },
          {
            label: '联系人2电话',
            prop: 'contactPhone2',
            type: 'input',
            hide: true,
            span: 6,
          },
          // {
          //   label: '联系人2邮箱',
          //   prop: 'contactMail2',
          //   type: 'input',
          //   hide: true,
          //   span: 6,
          //   rules: [
          //     {
          //       required: false,
          //       // message: "请输入邮箱",
          //       // trigger: "blur"
          //     },
          //     {
          //       pattern: Pattern.email,
          //       message: '格式不正确',
          //       trigger: 'blur',
          //     },
          //   ],
          // },
          {
            label: '联系人3',
            prop: 'contact3',
            type: 'input',
            hide: true,
            span: 6,
          },
          // {
          //   label: '联系人3部门',
          //   prop: 'contactDept3',
          //   type: 'input',
          //   hide: true,
          //   span: 6,
          // },
          {
            label: '联系人3电话',
            prop: 'contactPhone3',
            type: 'input',
            hide: true,
            span: 6,
          },
          // {
          //   label: '联系人3邮箱',
          //   prop: 'contactMail3',
          //   type: 'input',
          //   hide: true,
          //   span: 6,
          //   rules: [
          //     {
          //       required: false,
          //       // message: "请输入邮箱",
          //       // trigger: "blur"
          //     },
          //     {
          //       pattern: Pattern.email,
          //       message: '格式不正确',
          //       trigger: 'blur',
          //     },
          //   ],
          // },
        ],
        group: [
          {
            icon: 'el-icon-house',
            label: '工厂信息',
            prop: 'group1',
            column: [
              {
                label: '',
                prop: 'factory',
                className: 'addPadding',
                span: 24,
                labelWidth: 0,
                formslot: true,
                display: true,
              },
            ],
          },
          // {
          //   icon: 'el-icon-bank-card',
          //   label: '银行信息',
          //   prop: 'group2',
          //   column: [
          //     {
          //       label: '',
          //       prop: 'bankInfo',
          //       span: 24,
          //       labelWidth: 0,
          //       formslot: true,
          //       display: true,
          //     },
          //   ],
          // },
          {
            icon: 'el-icon-bank-card',
            label: '产品信息',
            prop: 'group3',
            column: [
              {
                label: '',
                prop: 'materialInfo',
                className: 'addPadding',
                span: 24,
                labelWidth: 0,
                formslot: true,
                display: true,
              },
            ],
          }
        ],
      },

      // {
      //   icon: 'el-icon-house',
      //   label: '工厂信息',
      //   prop: 'group2',
      // }
      //      ],
      //     }
    };
  },
  created() {
    console.log(this.$route.params);
    // this.init();
  },
  beforeRouteUpdate(to, from, next) {
    console.log('beforeRouteUpdate');
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用
    // 可以访问组件实例 `this`
    if (to.fullPath !== from.fullPath) {
      next();
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'permission']),
    // permissionList() {
    //   return {
    //     addBtn: this.validData(this.permission.dict_add, false),
    //     viewBtn: this.validData(this.permission.dict_view, false),
    //     delBtn: this.validData(this.permission.dict_delete, false),
    //     editBtn: this.validData(this.permission.dict_edit, false)
    //   };
    // }
  },
  mounted() {
   // this.init();
  },
  methods: {
    init() {
      this.$refs.customerDialogForm.show()
    },
    bindFiled(filed, val) {
      let detailInfo = this.option.group[0].column;
      this.findObject(detailInfo, filed).value = val;
      this.form[filed] = val;
    },
    handleSaveDraft() {
      this.form.isSubmit = 0;
      this.saveCustomer(this.form);
    },
      disabledCommit(data) {
        this.btnLoading = data;
      },
      async handleSubmit(form, done) {
      console.log('aaaaaaaaaaaaaa', form);
      form.isSubmit = 1;

        let checkFactory = false;
          await this.$refs.factory.$refs.tableRef.validate().then(errMap => {
            console.log(!errMap);
            if (errMap) {
                if (!!this.index && this.index !== 0) {
                    this.$message({
                        type: 'error',
                        message: '工厂信息有误！',
                    });
                }
                checkFactory = true;
            }
        });
        if(checkFactory) {
            if (this.option.tabsActive !== 1) {
                this.option.tabsActive = 1;
            }
            return;
        }
        let checkMaterial = false;
        this.$refs.materialInfo.$refs.grid.fullValidate(true).then(res => {
          console.log("then", res);
          if (res) {
                this.$message({
                    type: 'error',
                    message: '产品信息有误！',
                });
                if (this.option.tabsActive !== 2) {
                    this.option.tabsActive = 2;
                }

            } else {
                this.saveCustomer(form);
            }
        });
      done();
    },
      saveCustomer(form) {
          this.btnLoading = true;
          this.form.factoryList = this.$refs.factory.$refs.tableRef.getTableData().fullData;
          // this.form.bankList = this.$refs.bankInfo.data;
          this.form.materialAddList = this.$refs.materialInfo.$refs.grid.getInsertRecords();
          this.form.materialUpdateList =this.$refs.materialInfo.$refs.grid.getUpdateRecords();
          this.form.materialDeleteList = this.$refs.materialInfo.$refs.grid.getRemoveRecords();
          this.form.materialList = this.$refs.materialInfo.$refs.grid.getTableData().fullData;
          this.form.materialList.forEach(res=>{
            if(res.id.includes("row")){
              res.id = "";
            }
          })
          update(this.form).then(res => {
              if (res && res.data.success) {
                  this.$message({
                      type: 'success',
                      message: res.data.msg ? res.data.msg : '保存成功!',
                  });
                  this.$emit('success');
                setTimeout(() => {
                  this.$refs.customerDialogForm.hide()
                }, 2000)
              } else {
                  this.$message({
                      type: 'error',
                      message: res.data.msg ? res.data.msg : '保存失败!',
                  });
              }
          }).catch(err => {
              console.log(err)
              this.btnLoading = false;
          })
      },
    saveAfter() {
      this.close();
    },
    close() {
      // this.$refs.customerDialogForm.handleClose()
    },
      opened() {
          this.btnLoading = false;
      },
    handleTabClick(tabs) {
        console.log(tabs);
        if (tabs.index) {
            this.index = func.toInt(tabs.index);
            this.option.tabsActive = this.index + 1 > 0 ? this.index + 1 : 1;
            console.log(this.index);
            console.log(this.option.tabsActive)
        }
    },
  },
};
</script>

<style lang='scss' >
.el-col {
  margin-bottom: 0px !important;
}

.hideUpload .el-upload {
  display: none;
  /* 上传按钮隐藏 */
}

.hideUpload .el-upload__tip {
  display: none;
  /* 上传按钮隐藏 */
}

.el-upload-list__item-actions {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  cursor: default;
  text-align: center;
  color: #fff;
  opacity: 0;
  font-size: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s;
}

.el-upload-list__item-actions::after {
  display: inline-block;
  content: '';
  height: 100%;
  vertical-align: middle;
}

.el-upload-list__item-actions span {
  display: none;
  cursor: pointer;
}

.el-upload-list__item-actions span+span {
  margin-left: 15px;
}

.el-upload-list__item-actions:hover {
  opacity: 1;
}

.el-upload-list__item-actions:hover span {
  display: inline-block;
}

.el-form-item {
  margin-bottom: 14px !important;
}

.vxe-table--render-default.size--mini {
  font-size: 14px !important;
}

/*.addPadding {*/
  /*padding: 20px !important;*/
/*}*/
</style>
